<%-- 
    Document   : employeeCalender
    Created on : Oct 4, 2012, 1:44:38 PM
    Author     : Nguyen Hung
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.css' />
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.print.css' media='print' />
        <script type='text/javascript' src='../scripts/jQuery/jquery-ui-1.8.23.custom.min.js'></script>
        <script type='text/javascript' src='../scripts/jQuery/fullcalendar.js'></script>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jq.date.js"></script>  
        <link rel="stylesheet" type="text/css" href="../css/ui.datepicker.css"/>

        <script type='text/javascript'>

            $j(document).ready(function() {
                $j('input#leavedate1,input#leavedate2').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true }); 
                $j(".openCalender").live('click',function(){
                    var fn500 = $j(this).attr('lang');
                    $j.post("actionCalendarEmp.jsp?action=openCalendar&PN500="+fn500,function(data){
                        if(data != null){
                            window.location="detailCalender.jsp";
                        }
                    }) ;
                });
            });

        </script>
        <style type='text/css'>
#menu_top {
    float: left;
    padding-left: 0px;
    width: 100%;
}
                        #content {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-left: 0.7%;
    padding: 0 10px 30px;
    width: 97%;
}

#main {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

#footer {
    height: 150px;
    margin: 0;
    width: 100%;
}
            #comboboxZone{
                float:right;
                margin-top: 9px;
            }
            #comboboxZone select{
                width: 131px;
                height: 22px;
                margin-right: 5px;
            }
            #title{
                margin-top: 5px;
                float: left;
                height: 30px;
                width: 100%;
                background-color: #576675;
                text-align: center;
            }
            #title span{
                margin-top: 3px;
                text-align: center;
                color: #ffffff;
                font-size: 14px;
                float: left;
                margin-left: 5px;
            }
            .OpenCalen img{height: 16px;width: 15px;}
            .blue{
                background-color: #E0EFFC;
            }
            .openCalender{
                cursor: pointer;
            }
            /*            .sidebar a.add_new span {
                            width: 142px !important;
                        }*/

            .buttonsearch5 {
                background: url("../images/bg_submit.gif") repeat-x scroll 0 0 transparent;
                border: 0 none;
                border-radius: 2px 2px 2px 2px;
                color: #FFFFFF;
                float: left;
                font-size: 12px;
                font-weight: bold;
                margin: 7px 0 9px 9px;
                padding: 4px 0;
                text-transform: uppercase;
                width: 68px;
                cursor: pointer;
            }
         
            input[type="text"]{
                width: 65px;
            }
            </style>
        </head>
        <body>

            <div id="content">
                <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
                <h:outputText value="<div class='permission' lang='#{loginSession.right.EMP_LST_HOL}'></div>" escape="false"/>
                <div id="menu_top" style="margin-botom:20px;">
                    <div class="dropdown">
                        <div class="select_choise">
                            <a href="#"><span><h:outputText value="#{locale.area}"/></span></a>
                        </div>
                        <div class="select_hidden">
                            <ul>

                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="dropdown">
                        <div class="select_choise">
                            <a href="#"><span>Outlets</span></a>
                        </div>
                        <div class="select_hidden">
                            <ul>
                                <li><a href="#"><span>Ban Điều Hành</span></a></li>
                                <li><a href="#"><span>Nhóm IT</span></a></li>
                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <div id="content_detail" style="padding-top: 0px">
                            <div class="sidebar_row1">
                                <a4j:form style="width:40% !important;">
                                    <div class="sidebar" style="float: left;margin-top: 7px;width: 89px;">
                                        <input value="<h:outputText value="#{n500Controller.dateF}"><f:convertDateTime pattern="dd/MM/yyyy"/> 
                                           </h:outputText>" type="text" id="leavedate1" name="leavedate1" class="" />

                                </div>
                                <div style="float: left;margin-right: 6px;margin-top: 11px;"><h:outputText value="đến"/></div>
                                <div class="sidebar" style="float: left;margin-top: 7px;width: 89px;">
                                    <input value="<h:outputText  value="#{n500Controller.dateT}"><f:convertDateTime pattern="dd/MM/yyyy"/> 
                                           </h:outputText>" type="text" id="leavedate2" name="leavedate2" class="" />

                                </div>
                                <div style="float:left;width: 50px;" class="sidebar">
                                    <a4j:commandButton styleClass="buttonsearch5" value="Tìm kiếm" actionListener="#{n500Controller.reload}"/>
                                </div>
                            </a4j:form>

                            <a4j:form style="width:60% !important;">
                                <div class="fillter" style="margin-top: 5px;">
                                    <div class="dropdown">
                                        <div class="select_choise ">
                                            <a href="#"><span><h:outputText value="Danh sách"/></span></a>

                                        </div>
                                        <div class="select_hidden">
                                            <ul>
                                                <li>                                      
                                                    <h:outputLink  value="employeeCalender.jsp?action=datetoday&pageString=datetoday1&type=0">
                                                        <span>  <h:outputText value="Lịch tháng"/> </span>
                                                    </h:outputLink>
                                                </li>
                                                <li>                                      
                                                    <h:outputLink  value="employeeCalenderWork.jsp?action=datetoday&pageString=datetoday&type=1">
                                                        <span>  <h:outputText value="Nghỉ theo ngày"/> </span>
                                                    </h:outputLink>
                                                </li>


                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div id="comboboxZone">
                                    <%-- <label class="lbl_editWork" ><h:outputText value="Bộ phận"/> </label>
                                    <h:selectOneMenu id="comboboxS200" value="#{n500Controller.bophan}"  styleClass="cbx_editWork required" valueChangeListener="#{n500Controller.changeCombN450forN850ofCalender}" >

                            <f:selectItems value="#{n500Controller.combN450}" />
                            <a4j:support event="onchange" reRender="group" />
                        </h:selectOneMenu> --%>
                                    <label class="lbl_editWork" ><h:outputText value="Nhóm tổ"/> </label>
                                    <h:selectOneMenu id="group" value="#{n500Controller.FN850}"  styleClass="cbx_editWork required" valueChangeListener="#{n500Controller.changeComN850List}" >
                                        <f:selectItem itemLabel="Vui lòng chọn" />
                                        <f:selectItem itemLabel="Tất cả" itemValue="0" />
                                        <f:selectItems value="#{n500Controller.combN850}" />
                                        <a4j:support event="onchange" reRender="group1" />
                                    </h:selectOneMenu>
                                </div>
                            </div>

                        </div>

                        <div id="title">
                            <div style="margin-top:4px;">
                                <span>DANH SÁCH NHÂN VIÊN NGHỈ PHÉP</span>
                            </div>

                        </div>
                    </div>

                    <rich:dataTable  value="#{n500Controller.listAllN500}" var="item" rowKeyVar="row" columnClasses="col1"
                                     rows="17" reRender="ds" rowClasses="white,blue"

                                     id="abcxyz"
                                     >

                        <rich:column  styleClass="col1"> 
                            <f:facet name="header">
                                <h:outputText value="STT" styleClass="col1" />
                            </f:facet>
                            <div style="width: 10px;text-align: center;">
                                <h:outputText value="#{row+1}"/>
                            </div>

                        </rich:column>  
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Action"/>
                            </f:facet>
                            <div style="width: 50px;">
                                <div style="width: 20px;text-align: center;float: left;"class="OpenCalen">
                                    <h:panelGroup rendered="#{loginSession.right.EMP_CAL_ACT}">    <h:panelGroup rendered="#{item.nv503 =='A'}">    
                                            <h:outputLink value="confirmCalender.jsp?action=confirm&PN500=#{item.fn500}&width=300&height=150" styleClass="fancybox">
                                                <h:graphicImage title="Xác nhận" lang="#{item.fn500}" styleClass="" style="margin-right:5px;" value="../images/things.png"/>
                                            </h:outputLink>
                                        </h:panelGroup></h:panelGroup>

                                    </div>
                                    <div style="width: 20px;text-align: center;float: right;"class="OpenCalen">
                                    <h:outputLink rendered="#{loginSession.right.EMP_CAL_DEL}"  value="delete.jsp?id=#{item.fn100}&pn100C=#{item.fn000}&flag=N500N&width=300&height=150" styleClass="fancybox">
                                        <h:graphicImage styleClass="" title="Xóa" value="../images/delete_1.png"/>
                                    </h:outputLink>

                                </div>
                            </div>
                        </rich:column> 
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Người gửi"/>
                            </f:facet>
                            <div style="width: 120px;">
                                <h:outputText value="#{item.nv504}"/> 
                            </div>
                        </rich:column> 

                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Nhóm tổ"/>
                            </f:facet>
                            <div style="width: 60px;text-align: center;">
                                <h:outputText value="#{item.nhomto}"/> 
                            </div>

                        </rich:column> 
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Người nghỉ phép"/>
                            </f:facet>
                            <div style="width: 120px;">
                                <h:outputText value="#{item.hoten}"/> 
                            </div>

                        </rich:column> 
                        <rich:column>

                            <f:facet name="header">
                                <h:outputText value="Trạng thái"/>
                            </f:facet>
                            <div style="width: 60px;text-align: center;">
                                <h:panelGroup rendered="#{item.nv503 =='A'}">    <h:outputText style="color:red;font-weight:bold;" value="Đang chờ" /> </h:panelGroup>
                                <h:panelGroup rendered="#{item.nv503 =='B'}">    <h:outputText style="color:#108AE8;font-weight:bold;" value="Đã duyệt" /> </h:panelGroup>
                            </div>
                        </rich:column> 
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Hình thức nghỉ"/>
                            </f:facet>
                            <div style="width:100px;">
                              <h:outputText style="font-weight:bold;color:blue;" value="#{item.nv001}" title="#{item.nv502}"/>
                             
                            </div>
                        </rich:column> 
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Ngày nghỉ còn"/>
                            </f:facet>
                            <div style="width:50px;">
                                <h:outputText value="#{item.daylater}"/> 
                            </div>
                        </rich:column> 
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="Ngày nghỉ"/>
                            </f:facet>
                            <div style="width:50px; text-align: center">
                                    <h:outputText value="#{item.nd501}">
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText>
                                </div>
                            </rich:column> 
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Ngày hết phép"/>
                                </f:facet>
                                <div style="width:50px;text-align: center" >
                                    <h:outputText value="#{item.nd505}"> 
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText>
                                </div>
                            </rich:column> 
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText value="Người xác nhận"/>
                                </f:facet>
                                <div style="width:100px;text-align: center" >
                                    <h:outputText style="font-size:10px;" value="#{item.nd507}"/> </br>
                                    <h:outputText style="font-size:8px;" value="(#{item.nd508})"/>


                                </div>
                            </rich:column> 


                        </rich:dataTable>
                        <rich:datascroller align="left" for="abcxyz" maxPages="20" reRender="sc2" id="sc1" />




                    </div>
                </a4j:form>
            </body>
        </html>
